<!-- annotation RequestMerge -->
<template>
  <div>
    <button @click="excute">
      RequestMerge submit
    </button>
    <div>
      excuteCount={{ excuteCount }}
    </div>
    <div>
      requestCount={{ requestCount }}
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "kaygnas-vue-property-decorator";
import sleep from "@/methods/sleep";
import { RequestMerge } from "@/annotations/request-merge";

@Component({
  name: "Demo5",
})
export default class Demo5 extends Vue {

  public excuteCount: number = 0;

  public requestCount: number = 0;

  @RequestMerge(
    (id: number) => id + ""
  )
  public async requestApi(id: number) {
    await sleep(300);
    this.requestCount += 1;
    return id;
  }

  public excute() {
    this.requestApi(100);
    this.excuteCount += 1;
    this.requestApi(100);
    this.excuteCount += 1;
    this.requestApi(100);
    this.excuteCount += 1;
    this.requestApi(200);
    this.excuteCount += 1;
    this.requestApi(200);
    this.excuteCount += 1;
  }
}
</script>

